import {Swiper, SwiperSlide} from "swiper/react";
import {useState} from "react";
import {HomeProps} from "@/containers/Home/type.ts";

type BannerProps = {
    location: HomeProps['location'] | undefined
    banners: HomeProps['banners'] | undefined
}

function Banner(props: BannerProps) {
    const [page, setPage] = useState(1);
    const {location, banners} = props
    return <div className="banner">
        <h3 className="location">
            <span className="iconfont">&#xe67c;</span>
            {location?.address}
        </h3>
        <div className="search">
            <span className="iconfont">&#xe636;</span> 请输入你需要搜索的内容
        </div>
        <div className="swiper-area">
            <Swiper spaceBetween={0} slidesPerView={1} onSlideChange={(e) => setPage(e.activeIndex + 1)}>
                {banners?.map((item, index) => (
                    <SwiperSlide key={item.id}>
                        <div className="swiper-item">
                            <img className="swiper-item-img" src={item.imgUrl} alt={`banner-${index}`}/>
                        </div>
                    </SwiperSlide>
                ))}
            </Swiper>
            <div className="pagination">{page} / {banners?.length}</div>
        </div>
    </div>

}

export default Banner

